<#include "../common/header.htm">
<div class="content-wrapper" id="one_key_search_index" style="height: 900px">
   <div class="key_searchBox">
      <div class="key_searchImg"><img src="${ctx}/imgs/oneSearch.png" alt=""></div>
      <form action="">
         <div class="key_searchTop">
            <input onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')" autocomplete="off" @focus="showKeywords" type="text" id="key_searchTxt" list="searchTxt" v-model="txtval"/><input type="submit" ref="submit" value="搜索" id="one_keySearch" @click="MapSearch"/>
            <datalist name="" id="searchTxt">
               <option :value="item" v-for="(item,index) in searchArr" class="optioninp">{{item}}</option>
            </datalist>
         </div>
      </form>
   </div>
   <div class="solr">
      <button type="button" class="btn btn-success" onclick="makeTemplete()">制作模板</button>
      <button type="button" class="btn btn-primary" onclick="importData()">导入数据</button>
   </div>
</div>
<script type="text/javascript">
   function makeTemplete() {
      window.location.href="/onekey/list";
   }
   function importData() {
      window.location.href="/onekey/import";
   }
   var one_key_search=new Vue({
       el:'#one_key_search_index',
       data:{
           txtval:'',
           searchArr:[],
       },
       created:function () {
       },
       methods:{
           MapSearch(){
               if (localStorage.keywords) {
                   this.searchArr=localStorage.keywords.split(",")
               }
               this.searchArr.unshift(this.txtval);
               let newSearchArr = Array.from(new Set(this.searchArr));
               this.searchArr=newSearchArr;
               // console.log(this.searchArr)
               localStorage.setItem("keywords",this.searchArr)
           },
           showKeywords(){
               if (localStorage.keywords) {
                   this.searchArr=localStorage.keywords.split(",")
               }
           },
       }
   })
    $("#one_keySearch").click(function () {
        if(one_key_search.txtval == ''){
            toastr.error("请输入搜索内容");
            return false;
        }
        window.event.returnValue=false
        let val=$("#key_searchTxt").val();
        let url="${ctx}/onekey_solr/searchResultInit?keyword="+val;
        window.location.href = url;
    })
</script>
<style>
   .solr{
      width: 100px;
      height: 100px;
      position: fixed;
      top: 309px;
      right: -5px;
   }
   .btn-success {
      margin-bottom: 20px;
   }
    .optioninp{
       width: 491px!important;
    }
   #keywords li{
      height: 28px;
      line-height: 28px;
      cursor: pointer;
   }
   .key_searchImg {
      margin-left: 162px;
      margin-bottom: 50px;
   }
   .key_searchBox {
     width: 600px;
     height: 40px;
     margin: 200px auto;  /*大盒子页面居中 */
     position: relative;
   }
   .key_searchTop{
     width: 605px;
     height: 40px;
   }
   #key_searchTxt {
      width: 491px;
      height: 38px;
      border: 1px solid #CCCCCC;
      font-size: 18px;
      float: left;
      padding-left: 8px;
      outline: none;  /* 去除文本框获取焦点时的默认样式 */
   }
    #key_searchTxt:focus{
      border: 1px solid #3385FF;
       width: 491px;
   }
   #one_keySearch {
      width: 100px;
      height: 38px;
      float: left;
      background-color: #3385FF;
      color: white;
      border: none;
      font-size: 16px;
    }
   #keywords {
      position: absolute;  /* ul相对父盒子定位 */
      top: 152px;
      left: 0;
      border: 1px solid #ccc;
      border-top: none;
      width: 491px;
      padding-left: 0;
      margin-top: 1px;
      display: none;  /* 把ul隐藏起来，在获得相关内容时再显示出来，这样在搜索之前，页面只有一个搜索框和按钮 */
   }
   li {
      line-height: 24px;
      font-size: 16px;
      padding-left: 8px;
   }
</style>
